<template>
	<view class="ChangePassword-box">
		<view class="ChangePassword-top">
			<u-navbar title="修改密码">
				<view slot="right" style="margin-right: 40upx;font-size: 40upx;font-weight: bold;margin-bottom: 30upx;" @click="getRouter">...</view>
			</u-navbar>
		</view>
		<view class="ChangePassword-auto">
			<u-form :model="form" ref="uForm">
				<u-form-item label="输入新密码" label-width="200" prop="password">
					<u-input :password-icon="true" :border="border" type="password" v-model="form.password" placeholder="请输入密码"></u-input>
				</u-form-item>
				<u-form-item label="确认新密码" label-width="200" prop="rePassword">
					<u-input :border="border" type="password" v-model="form.rePassword" placeholder="请确认密码"></u-input>
				</u-form-item>
			</u-form>
		</view>
		<view class="ChangePassword-bottom" style="padding: 50px 50px 185px; background-color: #F7FCFF;">
			<u-button type="primary" @click="submit">确认修改</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					password: '',
					rePassword: '',
				},
				rules: {
					password: [
						{
							required: true,
							message: '请输入密码',
							trigger: ['change','blur'],
						},
						{
							// 正则不能含有两边的引号
							pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/,
							message: '需同时含有字母和数字，长度在6-12之间',
							trigger: ['change','blur'],
						}
					],
					rePassword: [
						{
							required: true,
							message: '请重新输入密码',
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								return value === this.form.password;
							},
							message: '两次输入的密码不相等',
							trigger: ['change','blur'],
						}
					],
				},
				border: false,
				errorType: ['message'],
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
		}
	}
</script>
<style>
	
</style>
<style lang="scss" scoped>
	.ChangePassword-auto{
		height: 500px;
		padding: 30upx;
	}
	.ChangePassword-bottom .u-btn--primary{
		background-color: #87B847 !important;
	}
</style>
